<template>
  <div class="live-container">
    <div class="search">
      <el-collapse-transition>
        <div v-show="searchshow" class="search-live">
          <el-input
            v-model="listQuery.liveName"
            class="search-input"
            placeholder="请输入直播活动名称"
            prefix-icon="el-icon-search"
            @keyup.enter.native="handleFilter"
          />
          <div class="button-group">
            <el-button type="primary" @click="handleFilter">搜索</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <span class="course-search-more" @click="searchshow = !searchshow">
              更多筛选条件
              <i class="el-icon-arrow-down" />
            </span>
          </div>
        </div>
      </el-collapse-transition>
      <el-collapse-transition>
        <div v-show="!searchshow" class="more-search-live">
          <div class="more-search">
            <el-row>
              <el-col :span="8">
                <div class="more-search-item">
                  <div>直播活动名称</div>
                  <el-input v-model="search.liveName" placeholder="请输入直播活动名称" />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="more-search-item">
                  <div>直播间状态</div>
                  <el-select v-model="search.status" placeholder="请选择" style="width: 100%">
                    <el-option v-for="item in liveStatus" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="more-search-item">
                  <div>审核状态</div>
                  <el-select v-model="search.aduitStatus" placeholder="请选择" style="width: 100%">
                    <el-option v-for="item in aduitStatusList" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="more-search-item">
                  <div>发布状态</div>
                  <el-select v-model="search.publishStatus" placeholder="请选择" style="width: 100%">
                    <el-option v-for="item in publishStatusList" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="more-search-item">
                  <div>直播开始时间</div>
                  <div class="block">
                    <el-date-picker
                      v-model="search.liveStartTime"
                      prefix-icon="none"
                      type="datetime"
                      placeholder="选择日期时间"
                      format="yyyy-MM-dd HH:mm"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    />
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="more-search-item">
                  <div>直播结束时间</div>
                  <div class="block">
                    <el-date-picker
                      v-model="search.liveEndTime"
                      prefix-icon="none"
                      type="datetime"
                      placeholder="选择日期时间"
                      format="yyyy-MM-dd HH:mm"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    />
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="more-search-item">
                  <div>直播平台</div>
                  <el-select v-model="search.dockingLiveType" placeholder="请选择" style="width: 100%">
                    <el-option v-for="(i, n) in dict.LIVETYPE" :key="n" :label="i.dictName" :value="i.dictValue" />
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="more-search-button">
            <el-button type="primary" @click="handleFilter">搜索</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <span class="course-search-more" @click="searchshow = !searchshow">
              精简筛选条件
              <i class="el-icon-arrow-up" />
            </span>
          </div>
        </div>
      </el-collapse-transition>
    </div>
    <div class="center-btn">
      <div class="title">直播活动</div>
      <div>
        <el-button @click="newCreate">新建直播</el-button>
        <el-button
          style="margin-left: 10px;"
          @click="classifyDialogVisible = true"
        >pc展示标签
        </el-button>
        <el-button style="margin-left: 10px;" @click="handleSelectPlatform">选取SaaS平台直播 </el-button>
      </div>
    </div>
    <div class="container">
      <v-table :list="tableData" tag="liveIndex" :list-loading="listLoading" :filter-column="filtercolumn">
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.relevanceStatus" type="text" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button
              v-if="scope.row.isForce !== 'SF01'"
              type="text"
              size="small"
              @click="deleteLive(scope.row.id)"
            >删除</el-button>
            <el-dropdown @command="handlePublish">
              <el-button v-if="scope.row.isForce !== 'SF01'" type="text" size="small">
                发布状态<i class="el-icon-arrow-down el-icon--right" /></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-if="scope.row.publishStatus === 'GIPSTSTUS02' || scope.row.publishStatus === 'GIPSTSTUS03'"
                  :command="`GIPSTSTUS01,${scope.row.id}`"
                >发布</el-dropdown-item>
                <el-dropdown-item
                  v-if="scope.row.publishStatus === 'GIPSTSTUS01' || scope.row.publishStatus === 'GIPSTSTUS03'"
                  :command="`GIPSTSTUS02,${scope.row.id}`"
                >
                  取消发布</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.publishStatus !== 'GIPSTSTUS03'" :command="`GIPSTSTUS03,${scope.row.id}`">已结束</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button v-if="scope.row.isForce !== 'SF01'" type="text" size="small" @click="handleClose(scope.row)">{{ scope.row.status === 'ZT01' ? '关闭' : '开启' }}</el-button>
            <el-button
              v-if="!!scope.row.roomId || scope.row.dockingLiveType === 'LIVETYPE_LINK'"
              type="text"
              size="small"
              @click="playback(scope.row)"
            >回放</el-button>
            <el-button v-if="scope.row.aduitStatus === 'AUDITRESULT02'" type="text" size="small" @click="handleData(scope.row)">统计</el-button>
            <el-button type="text" size="small" @click="handleViewDetail(scope.row)">地址</el-button>
            <el-button v-if="scope.row.aduitStatus !== 'AUDITRESULT02'" type="text" size="small" @click="handleaudit(scope.row)">审核</el-button>
            <el-button v-if="scope.row.isForce !== 'SF01'" type="text" size="small" @click="handleSetRange(scope.row)">范围</el-button>
            <el-button
              v-if="scope.row.isGetPoints === '1' && (!!scope.row.roomId || scope.row.dockingLiveType === 'LIVETYPE_LINK')"
              type="text"
              size="small"
              @click="handleInegral(scope.row)"
            >积分</el-button>
            <el-button type="text" size="mini" @click="handleTip(scope.row)">提醒</el-button>
            <el-button type="text" size="small" @click="handleConfig(scope.row)">配置</el-button>
            <el-button type="text" size="small" @click="handleSetNum(scope.row, scope.$index)">预约</el-button>
            <el-button
              v-if="scope.row.isForce === 'SF01'"
              type="text"
              size="mini"
              @click="handleSort(scope.row)"
              >修改排序</el-button
            >
          </template>
        </el-table-column>
      </v-table>
    </div>
    <div class="footer">
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
    <el-dialog title="地址" :visible.sync="centerDialogVisible" width="30%">
      <el-form :model="infoDetails">
        <el-form-item v-if="!showDSF" label="讲师地址">
          <el-row>
            <el-col :span="18" class="etc" style="margin-right: 5px">{{ infoDetails.lecturerUrl }}</el-col>
            <el-button type="text" @click="copy(infoDetails.lecturerUrl, $event)"><i class="el-icon-copy-document" /></el-button>
          </el-row>
        </el-form-item>
        <el-form-item v-if="isShow && !showDSF" label="助教地址">
          <el-row>
            <el-col :span="18" class="etc" style="margin-right: 5px">{{ infoDetails.assistantPass }}</el-col>
            <el-button type="text" @click="copy(infoDetails.assistantPass, $event)"> <i class="el-icon-copy-document" /></el-button>
          </el-row>
        </el-form-item>
        <el-form-item label="直播活动地址">
          <el-row>
            <el-col :span="16" class="etc" style="margin-right: 5px">{{ infoDetails.baseUrl }}</el-col>
            <el-button type="text" @click="copy(infoDetails.baseUrl, $event)"> <i class="el-icon-copy-document" /></el-button>
          </el-row>
        </el-form-item>
        <el-form-item v-if="!showDSF" label="讲师密码">
          <el-row>
            <el-col :span="8" class="etc" style="margin-right: 5px">{{ infoDetails.publisherPass }}</el-col>
            <el-button type="text" @click="copy(infoDetails.publisherPass, $event)"> <i class="el-icon-copy-document" /></el-button>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="直播范围" :visible.sync="rangeDialogVisible">
      <el-form :model="form">
        <el-form-item label="直播范围" prop="liveRange">
          <div class="block">
            <el-radio-group v-model="form.liveRange" @change="handleChange()">
              <el-radio v-for="(i, n) in rangeOptions" :key="n" :label="i.value">{{ i.label }}</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <div v-if="form.liveRange.includes('3')" class="tree-box-dom">
          <el-tree
            ref="treeDom"
            :data="orgTreeData"
            show-checkbox
            node-key="id"
            :default-checked-keys="seleCheckList"
            :props="orgProps"
            check-strictly
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span :class="{ red: node.checked }" @click="handleEle(node)">{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
        <div v-if="form.liveRange.includes('4')" style="padding-bottom:30px;text-align: right;" class="table-box">
          <el-button type="small" style="margin-bottom:5px;" @click="handleUpload">批量导入</el-button>
          <el-button type="small" style="margin-bottom:5px;" @click="handleDownload">下载模板</el-button>
          <el-button type="small" style="margin-bottom:5px;" @click="showuser = true">添加</el-button>
          <el-button type="small" style="margin-bottom:5px;" @click="handleDeletes">批量删除</el-button>
          <el-table :key="0" :data="listData" class="tableScope" :row-key="getRowKeys" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" :reserve-selection="true" />
            <el-table-column prop="userRealname" label="姓名" show-overflow-tooltip />
            <el-table-column prop="userSexName" label="性别" show-overflow-tooltip />
            <el-table-column prop="jieMphoneNumber" label="联系电话" show-overflow-tooltip />
            <el-table-column prop="deptName" label="所属部门" show-overflow-tooltip />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="danger" icon="el-icon-delete" circle @click="handleDel(scope.row.id)" />
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="Fromtotal > 0"
            :total="Fromtotal"
            :page.sync="formListQuery.page"
            :limit.sync="formListQuery.limit"
            @pagination="getFormList"
          />
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rangeDialogVisible = false">取 消</el-button>
        <el-button v-if="form.liveRange.includes('3')" type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <v-user v-if="showuser" @comit="handleUserComit" @cancel="handleUserCancel" />
    <el-dialog v-el-drag-dialog :close-on-click-modal="false" :title="'批量导入'" :visible.sync="uploadVisible" center width="450px">
      <el-upload
        ref="upload"
        v-loading="loadingUpload"
        element-loading-text="正在导入请稍后"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :auto-upload="false"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :action="uploadaction"
        :headers="uploadHeaders"
        accept=".xls, .xlsx"
        class="upload-model"
        :data="uploadData"
        drag
        multiple
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击导入</em>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="uploadVisible = false">取消</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="uploadSubmit">确定</el-button>
      </div>
    </el-dialog>

    <!--短信提醒-->
    <el-dialog
      v-el-drag-dialog
      title="短信提醒"
      :show-close="false"
      :visible.sync="fromDataSourceVisible"
      width="570px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <div class="sms-container">
        <el-row style="padding:10px 0px;">
          <el-col :span="24" style="font-size:15px;color:red;">{{ msg }}</el-col>
          <el-col :span="24" style="font-size:15px;color:red;margin-top: 15px;">{{ `已有${count || 0}人预约直播` }}</el-col>
        </el-row>
      </div>
      <span slot="footer">
        <el-button @click="fromDataSourceVisible = false">取 消</el-button>
        <el-button style="background-color: #EB523C;color:#fff;" @click="handleSendSms">发送短信提醒</el-button>
      </span>
    </el-dialog>
    <!-- 特殊标签 -->
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :visible.sync="classifyDialogVisible"
      title="特殊标签管理"
      center
      width="700px"
    >
      <classify v-if="classifyDialogVisible" v-model="tags" :parentref="true" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="classifyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSettingTags">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 强制下发修改排序 -->
    <el-dialog
        title="修改排序"
        width="30%"
        :visible.sync="sortDialog"
        @close="cancelDialog"
        v-el-drag-dialog
      >
        <el-input
          v-model="sortForm.sort"
          placeholder="请输入排序值"
          type="number"
        ></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button style="padding: 8px 30px;" @click="cancelDialog">取 消</el-button>
          <el-button style="padding: 8px 30px;" type="primary" @click="handelUpdateSort">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import VTable from '@/components/Table'
import VUser from '../components/user'
import { mapGetters } from 'vuex'
import CryptoJS from '@/utils/aesJiaJM'
import {
  queryPage,
  del,
  updateState,
  updateLive,
  queryURL,
  handleaudit,
  getPerson,
  getdepartmentInfo,
  submitUser,
  setLiveRange,
  getByName,
  queryDetail,
  insertDeptRange,
  delPersons,
  getDictByCode,
  updateNum,
  sendSms,
  giveUseDetail
} from '../api'
import clipboard from '@/utils/clipboard'
import { importSign } from '@/utils/fileImportOrExportSign'
import { getToken } from '@/utils/auth'
import elDragDialog from '@/directive/el-drag-dialog'
import { exportSign } from '@/utils/fileImportOrExportSign'
import { setTags, getCourseTag, update } from '../api/index'
import Classify from '../components/Classify'
export default {
  name: 'LiveIndex',
  components: { Pagination, VTable, VUser, Classify },
  directives: { elDragDialog },
  data() {
    return {
      fromDataSourceVisible: false,
      classifyDialogVisible: false,
      liveId: '',
      count: 0,
      searchshow: true,
      // 顶部搜索
      listQuery: {
        page: 1,
        limit: 10,
        liveName: ''
      },
      // 更多筛选
      search: {
        liveName: '',
        status: '',
        liveStartTime: '',
        liveEndTime: '',
        aduitStatus: '',
        publishStatus: '',
        dockingLiveType: ''
      },
      // 状态
      liveStatus: [{ value: 'ZT01', label: '开启' }, { value: 'ZT02', label: '关闭' }],
      aduitStatusList: [
        { value: 'AUDITRESULT01', label: '待审核' },
        { value: 'AUDITRESULT02', label: '审核通过' },
        { value: 'AUDITRESULT03', label: '审核不通过' },
        { value: 'AUDITRESULT04', label: '审核中' }
      ],
      publishStatusList: [
        { value: 'GIPSTSTUS01', label: '已发布' },
        { value: 'GIPSTSTUS02', label: '未发布' },
        { value: 'GIPSTSTUS03', label: '已结束' }
      ],
      // 表体数据
      tableData: [],
      total: 0,
      tags: '',
      centerDialogVisible: false,
      listLoading: false,
      infoDetails: {},
      CurlistData: [],
      formListQuery: { page: 1, limit: 10 },
      listData: [],
      form: {
        liveRange: ''
      },
      rangeDialogVisible: false,
      rangeOptions: [
        {
          value: '0',
          label: '公众'
        },
        {
          value: '1',
          label: '注册用户'
        },
        {
          value: '2',
          label: '认证用户'
        },
        {
          value: '3',
          label: '部门'
        },
        {
          value: '4',
          label: '人员'
        }
      ],
      orgTreeData: [],
      orgProps: {
        label: 'name',
        value: 'id',
        children: 'list',
        multiple: true
      },
      showuser: false,
      Fromtotal: 0,
      seleCheckList: [],
      uploadVisible: false,
      loadingUpload: false,
      uploadHeaders: {
        ttsxyhcs: getToken(),
        ttsxbid: 1
      },
      uploadaction: '/API-ENTERPRISE-BACKEND/backend/liveActivityRange/importUserRange',
      needView: false,
      selectArr: [],
      i: '',
      uploadData: {
        dataId: ''
      },
      isShow: false,
      needIntegral: true,
      dict: {
        LIVETYPE: []
      },
      msg: '',
      showDSF: false,
      sortForm: {},
      sortDialog: false
    }
  },
  created() {
    this.getList()
    getdepartmentInfo({ parentId: -1, orgId: this.user.orgId }).then((res) => {
      this.orgTreeData = res.data.data
    })
    getByName({ name: 'CC_ADD_AUDIT' }).then((res) => {
      if (res.data.data.configValue === '0') {
        this.needView = false
      } else {
        this.needView = true
      }
    })
    this.getDict('LIVETYPE')
  },
  computed: {
    ...mapGetters(['user'])
  },
  methods: {
    setTagList() {
      getCourseTag().then(res => {
        this.tagList = []
        const tagList = res.data.data.configValue && res.data.data.configValue.split(',')
        for (const i of tagList) {
          this.tagList.push({
            statusName: i,
            id: 'tag_' + i
          })
        }
        this.statusOptionsList = [...this.statusOptions, ...this.tagList]
        this.getList()
      })
    },
    // 新增标签
    handleSettingTags() {
      const tags = Array.from(new Set(this.tags.split(',').map(i => i.trim()))).join(',')
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      setTags({ tags }).then(res => {
        loading.close()
        this.$message({ type: 'success', message: '操作成功' })
        this.classifyDialogVisible = false
        this.setTagList()
      }).catch(() => {
        loading.close()
      })
    },
    handleSelectPlatform() {
      this.$router.push({ path: '/activity/live/SelectCourse4platform', query: {}})
    },
    /**
     * 跳转配置页面
     */
    handleConfig(item) {
      this.$router.push({
        path: this.$filterPath('configuration'),
        query: { id: item.id }
      })
    },
    /**
     * 打开短信提醒弹窗
     */
    handleTip(row) {
      this.liveId = row.id
      this.count = row.bookNum
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      giveUseDetail({
        id: row.id
      })
        .then((res) => {
          loading.close()
          if (res.data.code === '200') {
            this.msg = res.data.data
            this.fromDataSourceVisible = true
          }
        })
        .catch((error) => {
          loading.close(error)
        })
    },
    /**
     * 发送短信提醒
     */
    handleSendSms() {
      this.$confirm('确认发送短信提醒?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          return new Promise((resolve, reject) => {
            sendSms({ id: this.liveId })
              .then(() => {
                loading.close()
                this.$message({
                  title: '成功',
                  message: '发送成功',
                  type: 'success',
                  duration: 2000
                })
                this.fromDataSourceVisible = false
                this.getList()
              })
              .catch((error) => {
                loading.close()
                reject(error)
              })
          })
        })
        .catch(() => {})
    },
    // 搜索
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.listQuery.page = 1
      this.listQuery.liveName = ''
      for (const i in this.search) {
        if (this.search['' + i + ''] instanceof Array) {
          this.search['' + i + ''] = []
        } else {
          this.search['' + i + ''] = ''
        }
      }
      this.getList()
    },
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode({ dictCode: code })
          .then((res) => {
            this.dict[code] = res.data.data && res.data.data.length > 0 ? res.data.data[0].list : []
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    // 新建直播
    newCreate() {
      this.$router.push({
        path: this.$filterPath('manage'),
        query: { type: 'c' }
      })
      /* this.$router.push('manage')*/
    },
    // 查看回放
    playback(row) {
      this.$router.push({
        path: this.$filterPath('playback'),
        query: { i: row.id, c: row.roomId || '', t: row.dockingLiveType, r: JSON.stringify(row) }
      })
    },
    // 数据统计
    handleData(row) {
      this.$router.push({
        path: this.$filterPath('data'),
        query: { id: row.id, ri: row.roomId }
      })
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit
      }
      if (this.searchshow) {
        query['liveName'] = this.listQuery.liveName
      } else {
        query['liveName'] = this.search.liveName
        query['status'] = this.search.status
        query['liveStartTime'] = this.search.liveStartTime
        query['liveEndTime'] = this.search.liveEndTime
        query['publishStatus'] = this.search.publishStatus
        query['aduitStatus'] = this.search.aduitStatus
        query['dockingLiveType'] = this.search.dockingLiveType
      }
      return new Promise((resolve, reject) => {
        queryPage(query)
          .then((response) => {
            this.tableData = response.data.data.rows
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch((error) => {
            reject(error)
            this.listLoading = false
          })
      })
    },
    deleteLive(ids) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          return new Promise((resolve, reject) => {
            del({ id: ids })
              .then(() => {
                loading.close()
                this.$message({
                  title: '成功',
                  message: '删除成功',
                  type: 'success',
                  duration: 2000
                })
                this.getList()
              })
              .catch((error) => {
                loading.close()
                reject(error)
              })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    /**
     * 编辑
     * @param row
     */
    handleUpdate(row) {
      this.$router.push({
        path: this.$filterPath('manage'),
        query: { type: 'u', i: row.id }
      })
    },
    filtercolumn(scope, item) {
      if (item === 'cyrsrc') {
        return scope.row['joinPeopleNumber'] + '/' + scope.row['joinPeopleTime']
      }
      if (item === 'liveStartTime' || item === 'liveEndTime') {
        return (scope.row[item] && scope.row[item].substring(0, 16)) || ''
      } else {
        return scope.row[item]
      }
    },
    /**
     * 发布/取消发布
     */
    handlePublish(row) {
      const obj = {
        GIPSTSTUS01: '确认发布？',
        GIPSTSTUS02: '确认取消发布？',
        GIPSTSTUS03: '确认结束？'
      }
      const arr = row.split(',')
      this.$confirm(obj[arr[0]], '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          updateState({
            id: arr[1],
            publishStatus: arr[0]
          }).then((res) => {
            if (res.data.code === '200') {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.getList()
            }
          })
        })
        .catch(() => {})
    },
    handleClose(row) {
      this.$confirm(row.status === 'ZT01' ? '确认关闭？' : '确认开启？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          updateLive({
            id: row.id,
            status: row.status === 'ZT01' ? 'ZT02' : 'ZT01'
          }).then((res) => {
            if (res.data.code === '200') {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.getList()
            }
          })
        })
        .catch(() => {})
    },
    handleViewDetail(row) {
      if (row.dockingLiveType === 'LIVETYPE_LINK') {
        this.infoDetails.baseUrl = `/live/detail?id=${row.id}`
        this.showDSF = true
        this.centerDialogVisible = true
        return
      }
      queryURL({ id: row.id })
        .then((res) => {
          if (res.data.code === '200') {
            this.showDSF = false
            this.infoDetails = res.data.data
            this.infoDetails.baseUrl = `/live/detail?id=${row.id}`
            this.isShow = row.dockingLiveType !== 'LIVETYPE_POLYV'
            this.infoDetails.publisherPass = CryptoJS.$aesJieM(this.infoDetails.publisherPass)
            this.centerDialogVisible = true
          }
        })
        .catch(() => {})
    },
    handleaudit(row) {
      this.$confirm(this.needView ? '审核通过后方可开启直播间' : '提交后可直接开启直播间', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          handleaudit({ id: row.id, aduitStatus: 'AUDITRESULT04' }).then((res) => {
            if (res.data.code === '200') {
              if (res.data.data.code === 'AUDITRESULT03') {
                this.$confirm(`审核不通过原因: ${res.data.data.reason}`, '是否重新提交审核', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                })
                  .then(() => {
                    const loading = this.$loading({
                      lock: true,
                      text: '请稍后',
                      spinner: 'el-icon-loading',
                      background: 'rgba(0, 0, 0, 0.3)'
                    })
                    return new Promise((resolve, reject) => {
                      handleaudit({ id: row.id, aduitStatus: 'AUDITRESULT05' })
                        .then(() => {
                          loading.close()
                          this.$message({
                            title: '成功',
                            message: '操作成功！',
                            type: 'success',
                            duration: 2000
                          })
                          this.getList()
                        })
                        .catch((error) => {
                          loading.close()
                          reject(error)
                        })
                    })
                  })
                  .catch(() => {
                    this.$message({
                      type: 'info',
                      message: '已取消'
                    })
                  })
              } else {
                this.$message({
                  type: 'success',
                  message: res.data.msg || '操作成功'
                })
                this.getList()
              }
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    copy(str, event) {
      clipboard(str, event)
    },
    handleUserComit(arr) {
      const userId = arr.data.map((i) => i.id).join(',')
      submitUser({ dataId: this.i, userId }).then((res) => {
        this.$message({ type: 'success', message: res.data.msg || '操作成功' })
        this.handleUserCancel()
        this.getFormList()
      })
    },
    handleUserCancel() {
      this.showuser = false
    },
    getFormList() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      var query = {
        page: this.formListQuery.page,
        pageSize: this.formListQuery.limit,
        dataId: this.i
      }
      return new Promise((resolve, reject) => {
        getPerson(query)
          .then((res) => {
            loading.close()
            if (res.data.code === '200') {
              this.listData = res.data.data.rows
              this.listData = this.listData.map((i) => {
                return { jieMphoneNumber: CryptoJS.$aesJieM(i.userPhone), deptName: i.userDept, userRealname: i.name, userSexName: i.sex, id: i.id }
              })
              this.Fromtotal = res.data.data.total
              resolve()
            }
          })
          .catch((err) => loading.close(err))
      })
    },
    handleSetRange(row) {
      this.i = row.id
      const allList = []
      if (row.liveRange === '4') {
        allList.push(this.getFormList())
      }
      allList.push(this.handleGetInfo(this.i))
      Promise.all(allList).then((res) => {
        this.rangeDialogVisible = true
      })
    },
    handleEle(row) {
      console.log(row)
    },
    handleGetInfo(id) {
      return new Promise((resolve) => {
        queryDetail({ id })
          .then((res) => {
            // loading.close()
            this.form = res.data.data
            resolve()
          })
          .catch((err) => {
            console.log(err)
          })
      })
    },
    handleSubmit() {
      if (this.form.liveRange === '3') {
        const arr = this.$refs.treeDom.getCheckedKeys()
        if (arr && arr.length > 0) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          insertDeptRange({ dataId: this.i, deptId: arr.join(',') })
            .then((res) => {
              this.$message({
                message: res.data.msg || '操作成功',
                type: 'success'
              })
              loading.close()
              this.rangeDialogVisible = false
            })
            .catch((err) => {
              loading.close()
            })
        } else {
          this.rangeDialogVisible = false
          this.$message({ type: 'warning', message: '请选择部门' })
        }
      }
    },
    getRowKeys(row) {
      return row.id
    },
    handleChange(val) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      setLiveRange({ liveRange: this.form.liveRange, id: this.i })
        .then((res) => {
          loading.close()
          this.$message({
            type: 'success',
            message: '操作成功！'
          })
        })
        .catch((err) => loading.close())
    },
    uploadSubmit() {
      if (this.$refs['upload'].uploadFiles.length === 0) {
        this.$message.error('请上传文件')
      } else {
        this.uploadData.dataId = this.i
        this.$set(this, 'uploadHeaders', importSign(this.uploadHeaders, this.uploadData))
        this.$refs.upload.submit()
        this.loadingUpload = true
      }
    },
    handleUpload() {
      this.uploadVisible = true
      this.$nextTick(() => {
        this.$refs.upload.clearFiles()
      })
    },
    uploadSuccess(data) {
      this.loadingUpload = false
      if (data.code === '200') {
        this.$message.success(data.data)
        this.getFormList()
        this.uploadVisible = false
      } else {
        this.$refs.upload.clearFiles()
        if (data.data && data.data.fileid) {
          setTimeout(() => {
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = '/API-ENTERPRISE-BACKEND/backend/liveActivityRange/downloadCheckFile?errorId=' + data.data.fileid
            link.setAttribute('download', '错误信息.xls')
            link.setAttribute('target', '_blank')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }, 1000)
        } else if (data.msg) {
          this.$message.error(data.msg || '批量导入失败')
        }
        this.getFormList()
      }
    },
    uploadError(err) {
      this.loadingUpload = false
      this.$message.error(err || '网络异常')
      this.$refs.upload.clearFiles()
    },
    handleDel(ids) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          return new Promise((resolve, reject) => {
            delPersons({ ids })
              .then(() => {
                loading.close()
                this.$message({
                  title: '成功',
                  message: '删除成功',
                  type: 'success',
                  duration: 2000
                })
                this.getFormList()
              })
              .catch((error) => {
                loading.close()
                reject(error)
              })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleDeletes() {
      const ids = this.selectArr.map((i) => i.id).join(',')
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          return new Promise((resolve, reject) => {
            delPersons({ ids })
              .then(() => {
                loading.close()
                this.$message({
                  title: '成功',
                  message: '删除成功',
                  type: 'success',
                  duration: 2000
                })
                this.getFormList()
              })
              .catch((error) => {
                loading.close()
                reject(error)
              })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleSelectionChange(arr) {
      this.selectArr = arr
    },
    handleDownload() {
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = '/API-ENTERPRISE-BACKEND/backend/liveActivityRange/downloadTemplate' + exportSign().paramStr
      link.setAttribute('download', '人员导入模板.xls')
      link.setAttribute('target', '_blank')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    handleInegral(row) {
      this.$router.push({ path: this.$filterPath('integral'), query: { i: row.id, t: row.dockingLiveType }})
    },
    /*
     * 设置预约人数
     * */
    handleSetNum(row, index) {
      this.$prompt(`请设置直播课预约人数,当前：${row.bookNum || 0}人`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        inputType: 'Number',
        closeOnClickModal: false,
        inputValidator: (value) => {
          const num = row.bookNum === undefined ? 0 : row.bookNum
          if (parseInt(value) < parseInt(num)) {
            return '设置的人数不能小于当前人数'
          } else {
            return true
          }
        },
        callback: (action, instance) => {
          if (action === 'confirm') {
            const value = instance.inputValue
            updateNum({ id: row.id, bookNum: value })
              .then((res) => {
                if (res.data.code === '200') {
                  this.$message({
                    title: '成功',
                    message: '操作成功',
                    type: 'success'
                  })
                  this.$set(this.tableData, index, Object.assign(row, { bookNum: value }))
                }
              })
              .catch((error) => {})
          }
        }
      })
    },

    // 修改排序
    handelUpdateSort() {
      if (this.sortForm.sort === '') {
        this.$message({
          message: '请输入排序值',
          type: 'warning'
        })
        return
      }
      const obj = Object.assign({}, this.sortForm)
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      update(obj).then(res => {
        if(res.data.code === '200') {
          loading.close()
          this.sortDialog = false
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getList()
        } else {
          loading.close()
          this.$message({
            message: '修改失败',
            type: 'error'
          })
        }
      }).catch(() => {
        loading.close()
      })
    },

    // 强制下发数组修改排序
    handleSort(row) {
      console.log(row, '482');
      const obj = Object.assign({}, row)
      obj.sort = ''
      this.sortForm = obj
      this.sortDialog = true
    },

    // 取消修改排序
    cancelDialog() {
      this.sortDialog = false
      this.sortForm = {}
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.live-container {
  padding: 10px;
  .search {
    position: relative;
    .search-live {
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      padding: 5px;
      .search-input {
        width: 60%;
        border-bottom: 1px solid #ececec;
        input {
          outline: none;
          border: none;
          background: transparent;
          &:focus {
            outline: none;
            background-color: transparent;
          }
        }
      }
      .button-group {
        position: absolute;
        margin-left: 70%;
        button {
          // background-color: red;
          border: none;
          margin-right: 10px;
          color: #fff;
        }
        .course-search-more {
          color: $mainColor;
          font-size: 14px;
        }
      }
    }
    .more-search-live {
      background-color: #fff;
      padding: 15px;
      position: relative;
      .more-search {
        .more-search-item {
          position: relative;
          margin-left: 10px;
          width: 80%;
          color: #a6a6a6;
          font-size: 14px;
          margin-bottom: 5px;
          .item-label {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #a6a6a6;
            font-weight: 400;
          }
          .block {
            position: relative;
            width: 100%;
            overflow: hidden;
            .el-input__inner {
              position: relative;
              border: none;
              padding: 0;
              width: 500px;
              .el-date-picker {
                width: 100%;
              }
            }
            &:after {
              content: '';
              height: 1px;
              background-color: #e2e3e8;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }
          .el-input {
            position: relative;
            .el-input__inner {
              border: none;
              padding: 0;
            }
            &:after {
              content: '';
              height: 1px;
              background-color: #e2e3e8;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }
        }
      }
      .more-search-button {
        margin-top: 10px;
        text-align: center;
        .course-search-more {
          color: $mainColor;
          font-size: 14px;
        }
      }
    }
  }
  .center-btn {
    width: 100%;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    .title {
      line-height: 36px;
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }
  .container {
    width: 100%;
    position: relative;
    top: 5px;
  }
  .footer {
    margin-top: 20px;
    background-color: #fff;
    position: relative;
  }
  .dialog-footer {
    text-align: center;
    display: flex;
    justify-content: center;
  }

  .tree-box-dom {
    height: 400px;
    overflow-y: auto;
    .red {
      color: $mainColor;
    }
  }
  .radio_box {
    display: flex;
    align-items: center;
    .label {
      font-size: 14px;
      color: #a6a6a6;
      padding: 10px;
    }
  }
}
</style>
